<template>
  <div class="nav container">
    <div class="nav_left">
      <Menu></Menu>
    </div>
    <div class="nav_middle">
      <ul>
        <li>男表</li>
        <li>女表</li>
        <li>秒杀</li>
        <li>手表行情</li>
        <li>品牌馆</li>
        <li>体验中心</li>
        <li>名匠维修</li>
        <li>认证二手表</li>
        <li>二手竞拍</li>
        <li>高价回收</li>
        <li>手表咨讯</li>
        <li>认证开店</li>
      </ul>
    </div>
    <div class="nav_right">
      <router-link to="">
        <span>购物车</span>
        <i class="el-icon-shopping-cart-1"></i>
      </router-link>
    </div>
  </div>
</template>

<script>
import Menu from "./Menu.vue";
export default {
  components: {
    Menu,
  },
};
</script>

<style scoped lang="scss">
.nav {
  display: flex;
  justify-content: space-between;
  height: 48px;
  .nav_middle {
      margin-left: 30px;
    ul {
      display: flex;
      justify-content: space-between;
      width: 876px;
      height: 41px;
      li {
        font-size: 14px;
        color: #333;
        line-height: 41px;
      }
    }
  }
  .nav_right {
      width: 100px;
      height: 100%;
      a {
          width: 100px;
          display: inline-block;
          text-decoration: none;
          color: #999;
          line-height: 48px;
          text-align: center;
          i {
              font-size: 30px;
              vertical-align: middle;
          }
      }
  }
}
</style>
